<template>
	<view>
		<view class="header">
			用户满意度录音
		</view>
		<view class="btn box d-ai-c d-jc-c">
			<image src="../../static/luyin@2x.png" mode=""></image>
			<view class="ml-1" @touchstart="startRecord" @touchend="endRecord">
				{{text}}
			</view>
		</view>
		<view class="header">
			选择用户诊后需求
		</view>
		<view class="select">
			<radio-group @change="radioChange1" class="box">
				<label class="type_list box d-ai-c ml-3" v-for="(item,index) in traveltype">
					<view class="mt-1">
						<radio :value="item.triptype" :color="show"  :checked="index == current1" />
					</view>
					<view class="" style="font-weight: bold;">
						{{item.name}}
					</view>
				</label>
				
			</radio-group>
		</view>
		<view class="server-list box d-ai-c">
			<view class="">
				预期时间
			</view>
			
			<view class="select1 ml-4 tint">
				
				<view class="">
					<view class="" style="color: #999999;font-size: 30rpx;font-weight: 0;">
						<uni-datetime-picker type="datetime" v-model="starttime" @change="changeLog" />
					</view>
					
				</view>
			</view>
		</view>
		<view class="header1">
			备注（选填）
		</view>
		<view class="remak">
			<textarea v-model="remark" value="" placeholder="请简要描述用户所需服务" />
		</view>
		<view class="promise" @tap="submit">
			提交
		</view>
	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	export default {
		data() {
			return {
				text:'长按录音',
				isRecord: false, // 记录状态,录音中或者是未开始
				
				      intervalTime: 0,
				
				      timer: null,
				audio:'',
				voicePath: '',
				recording:'', //录音
				remark:'', //备注
				starttime:'',
				current1: 0,
				show:'#FF8338',
				longitude:'',
				latitude:'',
				triptype:'1',
				traveltype:[{
					triptype:'1',
					name:'复诊',
					checked:false
				},{
					triptype:'2',
					name:'手术',
					checked:false
				},{
					triptype:'3',
					name:'住院',
					checked:false
				},{
					triptype:'4',
					name:'无',
					checked:true
				}]
			}
		},
		intIntervalTime() {
		      // 用于显示整数的秒数
		
		      console.log(Math.round(this.intervalTime));
		
		      return Math.round(this.intervalTime);
		    },
		onLoad(option) {
			this.recordShow()
			this.getlocation()
			this.orderNo = option.orderNo
			this.receiveNo = option.accompanyReceiveNo
			let self = this;
			recorderManager.onStop(function (res) {
			    console.log('recorder stop' + JSON.stringify(res));
			    self.voicePath = res.tempFilePath;
				self.upload()
				
			}); 
		},
		methods: {
			recordShow(e) {
				var that = this;
				uni.getSetting({
					success(res) {
						// console.log(res.authSetting['scope.record']);
						//判断是否第一次获取录音功能
						if (!res.authSetting['scope.record']) {
							//调用后会立刻弹窗询问用户是否同意授权录音给小程序
							uni.authorize({
							scope: 'scope.record',
							success() {
								// 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
								// uni.startRecord()
								}
							})
							//判断录音是否是开启状态false没开启就跳转到开启页面
							if (res.authSetting['scope.record'] == false) {
									uni.openSetting({
									success(res) {
										console.log(res.authSetting)
										}
									});
								}
							} else if (res.authSetting['scope.record'] == true) {
								// that.show = true;
								// console.log(e.currentTarget.dataset.id);
								// that.current = e.currentTarget.dataset.id;
									}
								}
							})
						},
			upload(){
				uni.uploadFile({
					url: "https://app.xiangban365.com/app_mobile/" + "upload/file", //仅为示例，非真实的接口地址
					filePath: this.voicePath,
					name: 'file',
					header: {
						ContentType: "audio"
					},
					formData: {
						'user': 'test'
					},
					success:(uploadFileRes)=> {
						let data = JSON.parse(uploadFileRes.data)
						this.audio = data.dataMap
				
					}
				});
			},
			getlocation(){
				let _this = this
				uni.getLocation({
				    type: 'gcj02',
				    success:  function(res) {
				        console.log('当前位置的经度：' + res.longitude);
				        console.log('当前位置的纬度：' + res.latitude);
						_this.longitude = res.longitude
						_this.latitude = res.latitude
				    }
				});
			},
			startRecord() {
			      this.timer = setInterval(() => {
			        this.intervalTime += 0.5;
			
			        if (this.intervalTime >= 0.5 && !this.isRecord) {
			          //如果用户录制的时间太短,就不会去开启录音, 因为有个bug: recorderManager.stop()在短时间内开启在关闭的话,实际上他还在不停地录音,不知道你们有没有遇到过
			
			          // console.log("开始录音");
					  uni.showToast({
							title:'开始录音',
							icon:'none',
						})
			          this.isRecord = true;
			
			          this.intervalTime = 0;
			
			          recorderManager.start({
			            format: "mp3"
			          });
					  this.text='录音中'
			        }
			      }, 500);
			    },
			
			    endRecord() {
			      if (this.intervalTime <= 0.5) {
					  uni.showToast({
					  	title:'录音太短了',
						icon:'none',
					  })
			        // console.log("录音太短了!!!");
			      }
			
			      clearInterval(this.timer);
			
			      if (this.isRecord) {
			        setTimeout(() => {
						this.text='录音中'
			          recorderManager.stop();
			
			          this.isRecord = false;
						
			          console.log(this.isRecord);
					   uni.showToast({
					  		title:'录音完成',
							icon:'none',
					  	})
						this.text = '录音完成'
			        }, 500); //延迟小段时间停止录音, 更好的体验
			      }
			},
			changeLog(e) {
				console.log('----change事件:', e);
				this.starttime = e
			},
			radioChange1: function(evt) {
				let _this = this
				console.log(evt)
				_this.triptype = evt.detail.value
				for (let i = 0; i < _this.traveltype.length; i++) {
					if (_this.traveltype[i].triptype == evt.detail.value) {
						_this.current1 = i;
						break;
					}
				}
			},
			submit(){
				// if(this.audio==''||this.receiveNo==''||this.orderNo==''||this.triptype==''||this.starttime==''){
				// 	uni.showToast({
				// 		title:'请检查填写是否完整',
				// 		icon:'none'
				// 	})
				// }else{
					this.$api.serviceover({
						orderNo:this.orderNo,
						receiveNo:this.receiveNo,
						recording:this.audio,
						demand:this.triptype,
						demandTime:this.starttime,
						remark:this.remark,
						latitude:this.latitude,
						longitude:this.longitude,
					}).then((res) => {
						if(res.data.success){
							uni.$emit('trigger',2)
							uni.navigateBack({
								delta:1
							})
						}else{
							uni.showToast({
								title:res.data.message,
								icon:'none'
							})
						}
						
								
					})
				// }
				
			},
		}
	}
</script>

<style scoped lang="less">
	.promise{
		width: 690rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		text-align: center;
		font-weight: bold;
		color: #FFFFFF;
		background-color: #4CA6FF ;
		margin: 0 auto;
		border-radius: 50rpx;
		margin-top: 70rpx;
	}
.remak{
	width: 640rpx;
	height: 220rpx;
	background: #F2F7FF;
	border-radius: 12rpx;
	margin: 0 auto;
	padding: 20rpx;
}
.header{
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
    padding: 50rpx 0 36rpx 30rpx;	
}
.header1{
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
    padding: 30rpx 0 36rpx 30rpx;	
}
.btn{
	width: 240rpx;
	height: 88rpx;
	background: #4CA6FF;
	border-radius: 12rpx;
	margin-left: 30rpx;
	image{
		width: 20rpx;
		height: 36rpx;
	}
	view{
		font-size: 28rpx;
		color: #FFFFFF;
		font-weight: 500;
	}
}
.server-list{
	width: 690rpx;
	height: 120rpx;
	line-height: 120rpx;
	background: #FFFFFF;
	margin: 0 auto;
	margin-top: 30rpx;
	// text-align: center;
	
	view:nth-child(1){
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}
	.form-radio{
		margin-left: 30rpx;
	}
	.colorOrange{
		font-size: 30rpx;
		color: #4CA8FD;
	}
	.tint{
		color: #999999;
		overflow:hidden; //超出的文本隐藏
		text-overflow:ellipsis; //溢出用省略号显示
		white-space:nowrap; //溢出不换行
	}
	.select1{
		image{
			width: 25rpx;
			height: 30rpx;
		}
	}
	.list-1{
		width: 345rpx;
		image{
			width: 40rpx;
			height: 40rpx;
		}
		view{
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}
	}
}
</style>
